<template>
    <div class="insure">
        <x-header v-show="!isWeChar">
            <div slot="default" class="common__header--title">补全车辆信息</div>
            <div @click="goBack" slot="overwrite-left"><img slot="icon" src="~assets/x3/ico/goback1.png" class="go-back"></div>
        </x-header>
        <car-header></car-header>
        <div class="car-content">
            <group class="car__formPolicy--group">
                <cell class="car-insure-list">
                    <span class="car__list--title" slot="after-title">
                        <img slot="icon" src="~assets/car/add-other.png" class="go-back car-list-img">
                        <span style="color: #fff;" class="car__iconspan--title">完善车辆信息</span>
                    </span>
                </cell>
                <div class="car__formPolicy">
                    <div>
                        <x-input :disabled='true' v-model="tprpTitemCarDto.purchasePrice" placeholder="新车购置价" class="carinfo-input base-input_font" :min="2" :max="10">
                            <span class="insure__input" slot="right">
                                &nbsp 元
                            </span>
                            <div class="car__input" slot="label">
                                新车购置价
                            </div>
                        </x-input>
                        <x-input v-model="tprpTitemCarDto.seatCount" placeholder="座位数" class="carinfo-input base-input_font" :min="1" :max="3" required>
                            <span class="insure__input" slot="right">
                                &nbsp 座
                            </span>
                            <div class="car__input" slot="label">
                                座位数
                            </div>
                        </x-input>
                        <x-input v-model="tprpTitemCarDto.exhaustScale" placeholder="排量" class="carinfo-input base-input_font" :min="1" :max="6" required>
                            <div class="car__input" slot="label">
                                排量
                            </div>
                        </x-input>

                        <x-input v-model="tprpTitemCarDto.tonCount" placeholder="吨位" class="carinfo-input base-input_font" :max="6">
                            <div class="car__input" slot="label">
                                吨位
                            </div>
                        </x-input>
                        <x-input v-model="tprpTitemCarDto.poWeight" placeholder="整备质量" class="carinfo-input base-input_font" :min="1" :max="6" required>
                            <div class="car__input" slot="label">
                                整备质量
                            </div>
                        </x-input>
                        <selector class="carinfo-selector carselector-color" ref="defaultValueRef" title="能源类型" :options="fuelTypeList" v-model="tprpTitemCarDto.fuelType"></selector>

                        <selector v-show="!car.carInsureData.isNewCar" class="carinfo-selector carselector-color" ref="defaultValueRef" title="号牌种类" :options="licenseKindCodeList" v-model="tprpTitemCarDto.licenseKindCode"></selector>

                        <selector class="carinfo-selector carselector-color" ref="defaultValueRef" title="交管车辆种类" :options="vehicleCategoryList" v-model="tprpTitemCarDto.vehicleCategoryCode"></selector>

                        <!-- <x-input v-model="tprpTitemCarDto.purchasePrice" placeholder="新车购置价" class="carinfo-input base-input_font"  :min="2" :max="10" required>
                            <div class="car__input" slot="label">
                                新车购置价
                            </div>
                        </x-input>

                        <selector class="carinfo-selector base-input_font" ref="defaultValueRef" title="车主类型" :options="ownerTypeList" v-model="tprptCarOwnerDto.natureOfRole"></selector>
                        <selector v-show="tprptCarOwnerDto.natureOfRole==GROUP" class="carinfo-selector base-input_font" ref="defaultValueRef" title="企业性质" :options="groupTypeList" v-model="groupType"></selector>
                        </x-input>
                        <x-input v-model="tprptCarOwnerDto.idNo" v-show="tprptCarOwnerDto.natureOfRole==PERSONAL" @on-blur="carOwnerBlur()" placeholder="车主证件号" class="carinfo-input base-input_font" :min="2" :max="18" required>
                            <div class="car__input" slot="label">
                                车主证件号
                            </div>
                        </x-input> -->
                    </div>
                </div>
            </group>

        </div>
        <div style="height: 60px;"></div>
        <!-- <div class="insure__footer">
            <div @click="goCarOffer" class="insure__rightbtn">提交</div>
        </div> -->
        <!-- <sele-country></sele-country> -->
        <!-- 投保声明  理赔须知 -->
        <div v-show="car.carCurShowList.length!=0||renewalFlag=='1'" class="car_footer">
            <div class="car_leftbtn">
                <div class="details-alert">
                    <img slot="icon" style="width: 15px;" src="~assets/x3/ico/smal-1.png">&nbsp小提示:&nbsp选择车型自动带出车辆信息
                </div>
                <!-- <span>999</span> -->
            </div>
            <div @click="goCarOffer()" class="car_rightbtn">下一步</div>
        </div>

    </div>
</template>

<script>
import carHeader from "src/components/car/carHeader";
import { RequestUrl } from "src/common/url";
import Config from "src/common/config/insureConfig";
import CarConfig from "src/common/config/carConfig";
import {
    Mutations,
    Gender,
    PerIdentifyType,
    EntIdentifyType,
    benefType,
    insuredidentity,
    intervalTime,
    RouteUrl,
    Car_Mutations,
    DEFAULT_VEHICLE_CATEGORY_CODE
} from "src/common/const";
import {
    XHeader,
    Group,
    Cell,
    XInput,
    Datetime,
    XSwitch,
    Selector,
    XButton,
    XDialog,
    CellFormPreview,
    Actionsheet,
    TransferDom,
    Toast,
    CheckIcon
} from "vux";
import Validation from "src/common/util/validation";
import DateUtil from "src/common/util/dateUtil";
import { mapState, mapActions } from "vuex";
export default {
    components: {
        CellFormPreview,
        XDialog,
        Selector,
        XHeader,
        Group,
        Cell,
        XInput,
        Datetime,
        XSwitch,
        XButton,
        Actionsheet,
        TransferDom,
        Toast,
        CheckIcon,
        carHeader
    },
    computed: mapState({
        // insure: "insure",
        isLoading: "isLoading",
        user: "user",

        saveInsure: "saveInsure",
        detailsStore: "detailsStore",
        isWeChar: "isWeChar",
        carAddr: "carAddr",
        shareData: "shareData",
        initIndexData: "initIndexData",
        car: "car"
    }),
    data() {
        return {
            renewalFlag: "0",
            licenseKindCodeList: [],
            vehicleCategoryList: [],
            fuelTypeList: [],
            useNatureList: [],
            hourseType: [], //房屋类型
            datatime: DateUtil.getNowDateStr_Ymd(),
            buildStructure: "",
            // defaultMen: "法定受益人"
            tprpTitemCarDto: {
                runAreaCode: "",          //行驶区域代码
                carInsuredRelation: "",   //车主类型   默认：3===3-自然人 4-非自然人
                companyType: "",          //企业类型
                licenseNo: "",            //号牌号码 已上牌必传,未上牌不传
                licenseKindCode: "",      //号牌种类代码 已上牌必传,未上牌不传
                carKindCode: "",          //车辆种类 不传默认客车
                exhaustScale: "",         //排量  带出
                tonCount: "",             //吨位  带出
                seatCount: "",            //座位  带出
                useNatureCode: "",        //车辆使用性质
                engineNo: "",             //发动机号
                vinNo: "",                //车架号/VIN码
                modelCode: "",            //车型代码  带出
                whethelicenses: "",       //未上牌车辆标志代码   1-已上牌 0-未上牌
                whethercar: "",           //是否外地车
                fuelType: "",             //能源种类
                enrollDate: "",           //车辆初始登记日期
                purchasePrice: "",        //新车购置价 带出
                vehicleCategoryCode: DEFAULT_VEHICLE_CATEGORY_CODE,  //交管车辆种类
                vehicleModel: "",         //车辆型号名称   带出
                transferDate: "",         //转移登记日期   
                chgOwnerFlag: "",         //过户车辆标志
                loanBeneficiary: "",      //贷款车受益人
                vinNoQueryFlag: "",       //是否已使用VIN码解析
                poWeight: "",             //整备质量
                loanVehicleFlag: "",      //是否车贷投保多年标志
                purchaseDate: "",         //购买日期
                countryCode: "",          //进口/国产 带出
            }
        };
    },
    watch: {
    },
    filters: {
    },
    methods: {
        baseVal() {
            // debugger
            if (this.tprpTitemCarDto.purchasePrice == "") {
                return this.$common.showErrorMsg(this, "新车购置价不能为空！");
            } else if (this.tprpTitemCarDto.purchasePrice <= 0) {
                return this.$common.showErrorMsg(this, "新车购置价必须大于0！");
            }

            if (this.tprpTitemCarDto.seatCount == "") {
                return this.$common.showErrorMsg(this, "座位数不能为空!");
            } else if (this.tprpTitemCarDto.seatCount <= 0 || !Validation.isNum(this.tprpTitemCarDto.seatCount)) {
                return this.$common.showErrorMsg(this, "座位数必须大于0！");
            }

            if (this.tprpTitemCarDto.poWeight == "") {
                return this.$common.showErrorMsg(this, "整备质量不能为空!");
            } else if (!Validation.isNum(this.tprpTitemCarDto.poWeight)) {
                return this.$common.showErrorMsg(this, "整备质量必须为数字!");
            }
            if (this.tprpTitemCarDto.exhaustScale == "") {
                return this.$common.showErrorMsg(this, "排量不能为空!");
            } else if (this.tprpTitemCarDto.exhaustScale <= 0) {
                return this.$common.showErrorMsg(this, "排量必须大于0!");
            }

            if (this.tprpTitemCarDto.tonCount == "" && this.tprpTitemCarDto.tonCount != 0) {
                return this.$common.showErrorMsg(this, "吨位不能为空!");
            }
            if (this.tprpTitemCarDto.fuelType == "") {
                return this.$common.showErrorMsg(this, "能源类型不能为空!");
            }
            if (this.tprpTitemCarDto.vehicleCategoryCode == "") {
                return this.$common.showErrorMsg(this, "交管车辆种类不能为空!");
            }

            if (this.tprpTitemCarDto.carKindCode == "A0" && this.tprpTitemCarDto.tonCount != 0) {
                return this.$common.showErrorMsg(this, "承保车辆为客车时,吨位必须为0!");
            }
            return true;
        },
        goCarOffer() {
            if (this.baseVal()) {
                this.$common.goUrl(this, RouteUrl.CAR_OFFER);
            }

        },
        goBack() {
            if (this.renewalFlag == "1") {
                this.$common.goBackUrl(this, RouteUrl.CAR_INFO);
            } else {
                this.$common.goBackUrl(this, RouteUrl.CAR_SELECT);
            }
        },
        saveData() {
            this.$common.storeCommit(this, Car_Mutations.ADD_CAR_INFO_SAVE, this.tprpTitemCarDto);
        },
        setData() {
            let _this = this;
            setTimeout(() => {
                _this.renewalFlag = _this.car.carInfoList[_this.car.licenseNo].renewalFlag;
                _this.tprpTitemCarDto = _this.car.carInfoList[_this.car.licenseNo].tprpTitemCarDto;
                // console.log(_this.tprpTitemCarDto.vehicleCategoryCode);
                // debugger
                _this.fuelTypeList = _this.car.fuelTypeList;
                if (_this.tprpTitemCarDto.fuelType == "") {
                    _this.tprpTitemCarDto.fuelType = _this.fuelTypeList[0].key;
                }
                _this.licenseKindCodeList = _this.car.licenseKindCodeList;
                if (!_this.car.carInsureData.isNewCar && _this.tprpTitemCarDto.licenseKindCode == "") {
                    // _this.tprpTitemCarDto.licenseKindCode = _this.licenseKindCodeList[0].key;
                    _this.tprpTitemCarDto.licenseKindCode = "02";
                    console.log(_this.tprpTitemCarDto.licenseKindCode);
                }

                _this.vehicleCategoryList = _this.car.vehicleCategoryList;
                if (_this.tprpTitemCarDto.vehicleCategoryCode == "") {
                    _this.tprpTitemCarDto.vehicleCategoryCode = _this.vehicleCategoryList[0].key;
                }

                if (_this.tprpTitemCarDto.carKindCode == "A0") {
                    _this.tprpTitemCarDto.tonCount = 0;
                }
                let query = {
                    _this: _this,
                    seatCount: _this.tprpTitemCarDto.seatCount,
                    insureType: 3,
                    type: "init"
                }
                _this.$common.storeCommit(_this, Car_Mutations.CROSS_SALE_PLAN, query);
            }, 100);
        }
    },
    beforeRouteEnter(to, from, next) {
        sessionStorage["CAR_FORM_URL"] = from.path;
        next();
    },
    beforeMount() {
    },
    beforeDestroy() {
        if (sessionStorage["CAR_FORM_URL"] != "/") {
            this.saveData();
        }
    },
    mounted() {
        document.title = '填写投保单';
        //初始化，没有footer
        if (sessionStorage["CAR_FORM_URL"] == "/") {
            this.$common.goUrl(this, RouteUrl.CAR_INSURE);
            return;
        }
        this.setData();


        //车辆使用性质
        // this.useNatureList = CarConfig.getUseNature(this.tprpTitemCarDto.carInsuredRelation, this.tprpTitemCarDto.carKindCode);

        // window.addEventListener('load', function() {
        //     _this.saveData();
        // });
        // window.addEventListener('popstate', function(ev) {
        //     _this.saveData();
        // });
        // this.licenseKindCodeList = CarConfig.getLicenseKindCode();
        // this.vehicleCategoryList = CarConfig.getVehicleCategory();
        // this.hourseType = Config.getHouseType();
        //添加上一个页面的价钱

    }
};
</script>

<style  lang="scss">
.insure__iconspan {
  position: absolute;
  margin-top: 4px;
  width: 4px;
  height: 18px;
  background-color: #c8161d;
}

.insure__list--title {
  font-size: 15px;
  color: #c8161d;
}

.insure__iconspan--title {
  margin-left: 9px;
  font-size: 14px;
}

.insure__formPolicy {
  border: 1px solid #e7e7e7;
  margin: 0 18px;
}

.insure__formPolicy--group {
  .vux-no-group-title {
    padding-bottom: 20px;
  }
}

.insure__footer {
  position: fixed;
  bottom: 0px;
  z-index: 5;
  width: 100%;
  height: 47px;
  background-color: white;
  div {
    height: 100%;
    line-height: 47px;
    text-align: center;
    font-size: 20px;
  }
  box-shadow: 0px 0px 10px 1px #efefef;
}
.car-input {
  .weui-cell__bd {
    input {
      text-transform: uppercase;
    }
  }
}

.insure__rightbtn {
  background: #c8161d;
  color: #fff;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}

.fade-enter,
.fade-leave-to {
  transition: opacity 0.1s;
}

.insure__input-datatime {
  height: 24px;
  line-height: 0px;
  font-size: 14px;
  //   color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}

.insure__input {
  line-height: 0px;
  font-size: 14px;
  //   color: #7f7f7f !important;
  .weui-cell__ft {
    text-align: justify;
    color: #999999;
  }
}
.carinfo-selector {
  .weui-label {
    line-height: 0px;
    font-size: 14px;
  }
  select {
    direction: rtl;
  }
}
input::-webkit-input-placeholder {
  font-size: 14px;
  color: #7f7f7f;
}

.carinfo-input {
  input {
    text-align: right;
  }
}
</style>
